<template>
  <div class="box modules">
    <h5>模型选择</h5>
    <div class="modules-list">
      <a-space direction="vertical" :size="20">
        <ul>
          <a-space>
            <div class="label">类型</div>
            <li
              v-for="(item, index) in typeList"
              :class="{ active: item.value === checkValue.type }"
              :key="index"
              @click="handleModule(item, 'type')"
            >
              {{ item.text }}
            </li>
          </a-space>
        </ul>
        <ul>
          <a-space>
            <div class="label">版本</div>
            <li
              v-for="(item, index) in versionList"
              :class="{ active: item.value === checkValue.version }"
              :key="index"
              @click="handleModule(item, 'version')"
            >
              {{ item.text }}
            </li>
          </a-space>
        </ul>
        <ul>
          <a-space>
            <div class="label">风格</div>
            <li
              v-for="(item, index) in styleList"
              :class="{ active: item.value === checkValue.style }"
              :key="index"
              @click="handleModule(item, 'style')"
            >
              {{ item.text }}
            </li>
          </a-space>
        </ul>
      </a-space>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive, computed, watch } from "vue";
import { type, style, version, IItem, ICommand } from "../data";
import cloneDeep from "lodash/cloneDeep";

interface ICheckValue {
  type: string;
  version: string;
  style: string;
  [key: string]: string;
}

const props = defineProps({
  modelValue: {
    type: Array<ICommand>,
    default: () => [],
  },
});
const emits = defineEmits(["update:modelValue"]);

const checkValue = reactive<ICheckValue>({
  type: "midjourney",
  version: "--v 6.0",
  style: "default",
});
const typeList = type;
const styleList = style;
const versionList = computed(() => {
  return version[checkValue.type];
});

const handleModule = (item: IItem, key: string) => {
  checkValue[key] = item.value;
  if (key === "type") {
    checkValue.version = versionList.value[0].value;
  }
};

watch(checkValue, (val) => {
  const { version, style } = val;
  const command = cloneDeep(props.modelValue);
  const vIndex = command.findIndex((item) => item.type === "version");
  const sIndex = command.findIndex((item) => item.type === "style");
  command[vIndex].text = version;
  if (sIndex > -1) {
    if (style !== "--style raw") {
      command.splice(1, 1);
    }
  } else {
    const styleValue = {
      text: style,
      type: "style",
      close: false,
    };
    if (style !== "default") {
      command.splice(1, 0, styleValue);
    }
  }
  emits("update:modelValue", command);
});
</script>
